
import { Tabs, Row, Col, Input, Button, Menu } from 'antd';
import { WeaInputSearch, WeaLocaleProvider } from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;
import objectAssign from 'object-assign';

const TabPane = Tabs.TabPane;
import './style/index.css';


class WeaCrmTab extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    const that = this;
    const { datas, counts, keyParam, buttons, selectedKey, countParam, showSearchAd, buttonsAd, searchsAd,
      searchType, searchsBaseValue, hasDropMenu, dropIcon, buttonsDrop, showSearchDrop, searchsDrop, onlyShowRight, selectGroups } = this.props;

    const isIE8 = window.navigator.appVersion.indexOf('MSIE 8.0') >= 0;
    const isIE9 = window.navigator.appVersion.indexOf('MSIE 9.0') >= 0;
    const searchIcon = `${searchType}`.indexOf('icon') >= 0;
    const searchBase = `${searchType}`.indexOf('base') >= 0;
    const searchAdvanced = `${searchType}`.indexOf('advanced') >= 0;
    const searchDrop = `${searchType}`.indexOf('drop') >= 0;

    let nowSelectedKey = selectedKey || selectedKey === 0 ? selectedKey.toString() : '';
    if (hasDropMenu && datas) {
      datas.map((data) => {
        const dataKey = (data[keyParam] || data[keyParam] === 0) ? data[keyParam].toString() : '';
        const dropMenu = data.dropMenu;
        if (dropMenu) {
          if (dataKey == nowSelectedKey) { nowSelectedKey = [dataKey, `item_${dataKey}`]; }
          dropMenu.map((d) => {
            if (d.requestid === nowSelectedKey) { nowSelectedKey = [dataKey, d.requestid]; }
          });
        }
      });
    }
    let leftDom = '';
    if (!onlyShowRight) {
      if (hasDropMenu) {
        leftDom = selectGroups;
      } else {
        leftDom = (<Tabs
          ecId={`${this && this.props && this.props.ecId || ''}_Tabs@idsauh`}
          defaultActiveKey={nowSelectedKey}
          activeKey={nowSelectedKey}
          onChange={this.onChange.bind(this)}
        >
          {selectGroups}
        </Tabs>);
      }
    }

    return (
      <div className="wea-tab wea-crm-tab">
        <div className="crm-mine-tab">
          <div style={{ flex: 1, overflowX: 'hidden' }}>
            {leftDom}
          </div>
          <div style={{ minWidth: '280px', textAlign: 'right' }}>
            <div className="wea-search-tab">
              {
                buttons && buttons.map(data => (
                  <span style={{ marginRight: 15 }}>{data}</span>
                ))
              }
              {searchBase && <WeaInputSearch ecId={`${this && this.props && this.props.ecId || ''}_WeaInputSearch@ur88zj`} value={searchsBaseValue} onSearch={this.onSearch.bind(this)} onSearchChange={this.onSearchChange.bind(this)} />}
              {searchAdvanced && <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@8cammt`} type="ghost" className="wea-advanced-search" onClick={this.setShowSearchAd.bind(this, true)}>{getLabel(347, '高级搜索')} </Button>}
              {searchDrop && <span style={{ marginLeft: 15 }}>{dropIcon}</span>}
            </div>
          </div>
        </div>
        <div className="wea-search-container" style={{ display: showSearchAd ? 'block' : 'none' }}>
          <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@yqqwdx`} type="ghost" className="wea-advanced-search" onClick={this.setShowSearchAd.bind(this, false)}>{getLabel(347, '高级搜索')} </Button>
          <div className="wea-advanced-searchsAd" >
            {searchsAd}
          </div>
          <div className="wea-search-buttons">
            <div style={{ textAlign: 'center' }}>
              {
                buttonsAd && buttonsAd.map(data => (
                  <span style={{ marginLeft: 15 }}>{data}</span>
                ))
              }
            </div>
          </div>
        </div>
        <div className="mask-dark" style={{ display: showSearchAd ? 'block' : 'none' }} />
        <div className="mask-wrapper" style={{ display: showSearchAd ? 'block' : 'none' }} onClick={() => this.props.hideSearchAd && this.props.hideSearchAd()} />
        <div className="wea-search-container" style={{ display: showSearchDrop ? 'block' : 'none' }}>
          <span className="wea-Drop-search" onClick={this.setShowSearchDrop.bind(this, false)}>{dropIcon}</span>
          <div className="wea-advanced-searchsAd" >
            {searchsDrop}
          </div>
          <div className="wea-search-buttons">
            <div style={{ textAlign: 'center' }}>
              {
                buttonsDrop && buttonsDrop.map(data => (
                  <span style={{ marginLeft: 15 }}>{data}</span>
                ))
              }
            </div>
          </div>
        </div>
      </div>
    );
  }
  onSearch(v) {
    if (typeof this.props.onSearch === 'function') {
      this.props.onSearch(v);
    }
  }
  onSearchChange(v) {
    if (typeof this.props.onSearchChange === 'function') {
      this.props.onSearchChange(v);
    }
  }
  setShowSearchAd(bool) {
    if (typeof this.props.setShowSearchAd === 'function') {
      this.props.setShowSearchAd(bool);
    }
  }
  setShowSearchDrop(bool) {
    if (typeof this.props.setShowSearchDrop === 'function') {
      this.props.setShowSearchDrop(bool);
    }
  }
  getKey(obj) {
    const { datas, keyParams } = this.props;
    if (!keyParams) {
      return '0';
    }
    if (!obj) return '';
    let theKey = '';
    keyParams.map((name) => {
      theKey += `${obj[name]}_`;
    });
    if (theKey && theKey !== '') {
      theKey = theKey.substring(0, theKey.length - 1);
    }
    return theKey;
  }
  onChange(key) {
    if (typeof (this.props.onChange) === 'function') {
      this.props.onChange(key);
    }
  }
  onMenuChange(o) {
    if (typeof (this.props.onChange) === 'function') {
      this.props.onChange(o.key);
    }
  }
}

export default WeaCrmTab;


// WEBPACK FOOTER //
// ./WEAVER_CloudStore_ec/src4js/components/ecology9/wea-tab/index.js
